<template>
  <div class="app-container">
    <div class="cabinet">

      <!-- 按钮和搜索框 -->
      <div class="menu el-col-14">
        <el-button type="default" @click="addCabinet">添加</el-button>
        <!--<el-button type="danger">xxxx</el-button>-->
      </div>
      <div class="search el-col-10">
        <el-input placeholder="搜索关键字" v-model="params.name" @keyup.enter.native="searchClick" class="input-with-select">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>

      <!-- 资源列表 -->
      <el-table :data="cabinetList" border style="width: 100%">
        <el-table-column sortable width="80" align="center" prop="id" label="ID"></el-table-column>
        <el-table-column sortable min-width="100" max-width="250" align="center" prop="name" label="机柜名称"></el-table-column>
        <el-table-column sortable min-width="100" max-width="250" align="center" prop="idc.idc_name" label="所属机房"></el-table-column>
        <el-table-column width="150" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleSubmitDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pageination" v-show="total>5">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 15, 20]"
          :current-page.sync="params.page"
          :page-size="params.page_size"
          :total="total">
        </el-pagination>
      </div>

      <!-- 新增机柜弹窗 -->
      <el-dialog title="新增机柜" :visible.sync="dialogVisibleAdd" width="30%">
        <el-form :model="cabinetItem" status-icon :rules="rules" ref="cabinetAddForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="机柜名称" prop="name">
            <el-input type="text" v-model="cabinetItem.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属机房" prop="name">
            <el-select class="select" v-model="cabinetItem.idc" placeholder="请选择">
              <el-option
                v-for="idc in idc_list"
                :key="idc.id"
                :label="idc.name"
                :value="idc.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btn-wrapper">
            <el-button size="small" @click="resetAddForm">关闭</el-button>
            <el-button size="small" :loading="isLoading" type="primary" @click="submitAddForm">添加</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 编辑机柜弹窗 -->
      <el-dialog title="编辑机柜" :visible.sync="dialogVisibleEdit" width="30%">
        <el-form :model="cabinetTempItem" status-icon :rules="rules" ref="cabinetEditForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="机柜名称" prop="name">
            <el-input type="text" v-model="cabinetTempItem.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属机房" prop="name">
            <el-select class="select" v-model="temp_idc_id" placeholder="请选择关联IDC">
              <el-option
                v-for="idc in idc_list"
                :key="idc.id"
                :label="idc.name"
                :value="idc.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btn-wrapper">
            <el-button size="small" @click="resetEditForm">关闭</el-button>
            <el-button size="small" :loading="isLoading" type="primary" @click="submitEditForm">修改</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import { getCabinetsList, getIdcsList, createCabinet, deleteCabinet, updateCabinet } from '@/api/resources'
  // getIdcsList

  export default {
    name: 'cabinet',
    data() {
      return {
        cabinetList: [],
        isLoading: false,
        dialogVisibleAdd: false,
        dialogVisibleEdit: false,
        temp_idc_id: '',
        cabinetItem: {
          name: '',
          idc: ''
        },
        cabinetTempItem: {
          id: '',
          name: '',
          idc: ''
        },
        idc_list: [],
        params: {
          page: 1,
          page_size: 10,
          name: '' // 机柜名搜索
        },
        total: 0,
        rules: {
          name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
          idc: [{ required: true, message: '请选择所属IDC', trigger: 'blur' }]
        }
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      },
      handleSizeChange(val) {
        this.params.page_size = val
        this.fetchData(Object.assign(this.searchForm))
      },
      fetchData() {
        getCabinetsList(this.params).then(
          res => {
            this.cabinetList = res.results
            this.total = res.count
          })
      },
      fetchIdcData() {
        const params = {
          page_size: 0
        }
        getIdcsList(params).then(
          res => {
            this.idc_list = res
          }
        )
      },
      handleEdit(value) {
        this.cabinetTempItem = { ...value }
        this.dialogVisibleEdit = true
        this.temp_idc_id = this.cabinetTempItem.idc.id
      },
      handleSubmitDelete(value) {
        this.$confirm(`确认删除机柜 ${value.name} 吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(
          () => {
            deleteCabinet(value.id).then(
              () => {
                this.fetchData()
                this.$message({
                  message: '删除机柜成功',
                  type: 'success'
                })
              })
          }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      addCabinet() {
        this.dialogVisibleAdd = true
      },
      searchClick() {
        this.params.page = 1
        this.fetchData()
      },
      resetAddForm() {
        this.dialogVisibleAdd = false
        this.dialogVisibleEdit = false
        this.$refs.cabinetAddForm.resetFields()
      },
      resetEditForm() {
        this.dialogVisibleAdd = false
        this.dialogVisibleEdit = false
        this.$refs.cabinetEditForm.resetFields()
      },
      submitAddForm() {
        this.$refs['cabinetAddForm'].validate(
          (valid) => {
            if (!valid) {
              return
            }
            this.isLoading = true
            createCabinet(this.cabinetItem).then(
              () => {
                this.isLoading = false
                this.resetAddForm()
                this.fetchData()
                this.$message({
                  type: 'success',
                  message: '创建机柜成功'
                })
              }
            )
          })
      },
      submitEditForm() {
        this.$refs['cabinetEditForm'].validate(
          (valid) => {
            if (!valid) {
              return
            }
            const { id, ...data } = this.cabinetTempItem
            this.isLoading = true

            data.idc = this.temp_idc_id
            this.temp_idc_id = ''
            updateCabinet(id, data).then(
              () => {
                this.isLoading = false
                this.resetEditForm()
                this.fetchData()
                this.$message.success('修改机柜成功')
              })
          })
      }
    },
    created() {
      this.fetchData()
      this.fetchIdcData()
    }
  }
</script>

<style lang="scss" scoped>
  .cabinet {
    .pageination {
      text-align: center;
      margin-top: 15px;
    }
    .search {
      margin-bottom: 10px;
    }
    .btn-wrapper {
      text-align: right;
    }
    .select {
      width: 100%;
    }
  }
</style>
